<template>
  <div class="department">
    <a-card class="general-card">
      <searchBar />
      <div>
        <vxe-table
          height="740"
          border
          show-footer
          :row-config="{ isCurrent: true }"
          :column-config="{ isCurrent: true, resizable: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          :footer-method="footerMethod"
          :data="tableData"
          :menu-config="menuConfig"
          @checkbox-all="selectAllChangeEvent"
          @checkbox-change="selectChangeEvent"
          @menu-click="contextMenuClickEvent"
        >
          <vxe-column field="name" width="400" title="订单信息" fixed="left">
            <template #default="{ row }">
              <a-space direction="vertical" fill>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">品号</div>
                  {{ row.itemId }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">品名</div>
                  {{ row.productName }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">单号</div>
                  {{ row.orderId }}
                </div>

                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">规格</div>
                  {{ row.format }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">备注</div>
                  {{ row.orderRemark }}
                </div>
              </a-space>
            </template>
          </vxe-column>

          <vxe-column field="info" width="180" title="客户信息" fixed="left">
            <template #default="{ row }">
              <a-space direction="vertical" fill>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">名称</div>
                  {{ row.custom }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">单号</div>
                  {{ row.customID }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">单别</div>
                  {{ row.workOrderType }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">单号</div>
                  {{ row.workersNumber }}
                </div>
              </a-space>
            </template>
          </vxe-column>

          <vxe-column field="pruomInfo" width="150" title="排产信息" fixed="left">
            <template #default="{ row }">
              <a-space direction="vertical" fill>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">总数</div>
                  {{ row.number }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">已排量</div>
                  {{ row.scheduledNumber }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">未产量</div>
                  {{ row.unproducedNumber }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">工艺</div>
                  {{ row.process }}
                </div>
                <div class="tabelmgkj">
                  <div class="tabelmgkj-titleP">生产线</div>
                  {{ row.productionLine }}
                </div>
              </a-space>
            </template>
          </vxe-column>

          <vxe-column v-for="value in timeInterval" :key="value" :field="value" :edit-render="{}" width="90">
            <template #header>
              <div>{{ value }}</div>
            </template>
            <template #edit="{ row, rowIndex }">
              <vxe-input
                v-model="tableData[rowIndex][value].value"
                type="text"
                @change="(param) => inputTion(param, row, value, rowIndex)"
              ></vxe-input>
            </template>
            <template #default="{ row }">
              {{ row[value].value }}
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        >
        </vxe-pager>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './productionSchedulingBom';
import FormHeader from '@com/formHeader/formHeader.vue';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import EditForm from '@com/editForm/editForm.vue';
import TemplatePage from '@/views/masterPage/templatePage/templatePage.vue';
import searchBar from '@/components/searchBar/searchBar';

export default {
  name: 'ProductionOrder',
  components: {
    FormHeader,
    formButtonGroup,
    EditForm,
    TemplatePage,
    searchBar,
  },
  setup() {
    const { base, init, footerMethod, contextMenuClickEvent, menuConfig, selectAllChangeEvent, selectChangeEvent, inputTion } =
      importConfig();
    init();
    return {
      ...toRefs(base),
      menuConfig,
      init,
      footerMethod,
      contextMenuClickEvent,
      selectAllChangeEvent,
      selectChangeEvent,
      inputTion,
    };
  },
};
</script>

<style scoped lang="less">
.tabelmgkj {
  font-size: 15px;
  color: #0b43aa;
  font-weight: bold;
  &-titleP {
    width: 40px;
    font-size: 12px;
    color: #666;
    display: inline-block;
  }
}
</style>
<style lang="less">
.my-menus {
  background-color: #f8f8f9;
}
.my-menus .vxe-ctxmenu--link {
  width: 200px;
}
.my-copy-item {
  font-weight: 700;
  font-style: oblique;
}
.color-red {
  color: red;
}
.color-blue {
  color: blue;
}
.color-orange {
  color: orange;
}
</style>
